<template>
  <div class="found">
    <!-- 顶部搜索 -->
    <van-search
      placeholder="请输入搜索关键词"
      v-model="searchVal"
      shape="round"
      background="#D7B782"
      left-icon
      right-icon="search"
    />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- body -->
      <van-panel title="著名艺术家" desc status class="listPanel">
        <div class="container PanelBody">
          <div class="artist" v-for="(item,index) in artistData" :key="index" @click="$router.push('./author?user='+item.userId)">
            <van-image  :src="item.img" />
            <p class="Name">米南阳</p>
            <p class="NameDesc">宋代名家米芾后人</p>
          </div>
        </div>
      </van-panel>
      <van-panel title="水墨畅销艺术家" desc status class="listPanel">
        <div class="container PanelBody">
          <div class="artist" v-for="(item,index) in artistData" :key="index">
            <van-image  :src="item.img" />
            <p class="Name">米南阳</p>
            <p class="NameDesc">宋代名家米芾后人</p>
          </div>
        </div>
      </van-panel>
      <van-panel title="书法畅销艺术家" desc status class="listPanel">
        <div class="container PanelBody">
          <div class="artist" v-for="(item,index) in artistData" :key="index">
            <van-image  :src="item.img" />
            <p class="Name">米南阳</p>
            <p class="NameDesc">宋代名家米芾后人</p>
          </div>
        </div>
      </van-panel>
    </van-pull-refresh>

    <Tabbar :active="1"></Tabbar>
  </div>
</template>
<script>
/* ... */
import Tabbar from '@/components/Tabbar.vue'
export default {
  name: 'message',

  mixins: [],

  components: {
    Tabbar
  },

  props: {},

  data () {
    return {
      count: 0,
      isLoading: false,
      searchVal: '',
      artistData: [
        {
          userId: 0,
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          name: '米南阳',
          desc: '宋代名家米芾后人'
        },
        {
          userId: 1,
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          name: '周宏兴',
          desc: '全国政协礼堂馆长'
        },
        {
          userId: 2,
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          name: '金运昌',
          desc: '故宫博物院专家'
        },
        {
          userId: 2,
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          name: '金运昌',
          desc: '故宫博物院专家'
        }
      ]
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */
.container {
  margin: 0 15px;
}
.found {
  background-color: #f6f6f6;
  height: 100%;
  .van-pull-refresh {
    height: calc(100% - 50px - 55px);
    overflow-y: auto;
    .listPanel {
      margin-bottom: 10px;
      .van-cell:not(:last-child)::after {
        left: 0;
      }
      .PanelBody {
        padding-top: 10px;
        padding-bottom: 10px;
        height: 160px;
        overflow-x: scroll;
        white-space: nowrap;
        .artist {
          width: 100px;
          overflow: hidden;
          margin-right: 10px;
          display: inline-block;
          .van-image {
            width: 100px;
            height: 100px;
            display: inherit;
            .van-image__img {
              font-size: 0;
            }
          }
          p {
            margin: 0;
            font-size: 12px;
            color: #666666;
          }
          .Name {
          }
          .NameDesc{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
